import { Component, signal, effect, Injector, computed, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'lib-ngx-raw-tree',
  standalone: true,
  imports: [],
  // templateUrl: './ngx-raw-tree.component.html',
  styleUrl: './ngx-raw-tree.component.css',
  template: `
    <div class="ngx-raw-tree   t-py-4 t-grid t-grid-cols-5 t-gap-4">
      tree {{value()}}
      <button (click)="increment()">+</button>
      <button (click)="decrement()">-</button>
      <button (click)="reset()">reset</button>
      <button (click)="set(7)">set</button>

      {{fullName()}}

      <button (click)="firstName.set('Alex')">set first name</button>
      <button (click)="lastName.set('Lee')">set last name</button>
    
  </div>
  `
})
export class NgxRawTreeComponent implements OnInit, OnDestroy {

  value = signal(0);

  increment() {
    this.value.update(val => val + 1);
  }
  decrement() {
    this.value.update(val => val - 1);
  }
  reset() {
    this.value.set(0);
  }

  set(val: number) {
    this.value.set(val);
  }

  injector = Injector.create({
    providers: [
      { provide: 'value', useValue: this.value }
    ]
  });


  firstName = signal('John');
  lastName = signal('Doe');

  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

  constructor() {
    effect(() => {
      console.log(`The current count is: ${this.value()}`);
    });
  }

  private effectRef = effect(() => {
    console.log(`The fullName is: ${this.fullName()}`);

  })

  ngOnInit(): void {

  }

  ngOnDestroy() {
    this.effectRef.destroy();
  }




}
